import React from 'react';
import FormEnhance, {InputNumber, InputSwitch, InputText} from "common/form";
import {SecurityMenu} from "type/entity/SecurityMenu";
import {fetchAddMenu} from "storage/redux/async-action/menuAsyncAction";
import MenuSelectHandler from "./MenuSelectHandler";
import IconFont from "util/icon-util";

const MenuAddComponent = () => {
    const [ iconValue, setIconValue ] = React.useState<string>("icon");
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setIconValue(e.target.value.trim());
    };
    return (
        <FormEnhance<SecurityMenu>
            title={"添加菜单"}
            backupText={"菜单列表"}
            requestAction={fetchAddMenu}
            initialValues={{ parentId: 1030000000, last: true }}
        >
            <MenuSelectHandler/>
            <InputText<SecurityMenu> name={"label"} label={"菜单标签"}/>
            <InputText<SecurityMenu> name={"explain"} label={"菜单描述"}/>
            <InputNumber<SecurityMenu> name={"menuOrder"} label={"菜单排序"}/>
            <InputText<SecurityMenu> name={"icon"} label={"菜单图标"} suffix={<IconFont type={iconValue}/>} onChange={onChange}/>
            <InputSwitch<SecurityMenu> name={"last"} label={"子菜单"}/>
            <InputSwitch<SecurityMenu> name={"disabled"} label={"菜单禁用"}/>
        </FormEnhance>
    );
};

export default MenuAddComponent;